<template>
   <div class="recentComments-component">
   		<div class="item6">
            <div class="title">
                <h1>
                    網友熱論
                </h1>
            </div>
            <ul class="recent-comments" v-if="reviews.length>0" :class="{moreRecent:reviews.length>=10}">
                <li class="con" :key="index" v-for="(arr,index) in reviews">
                    <div class="user">
                        <div class="touxiang">
                            <img :src="arr.type?anonymity:anonymity2" alt="" >
                        </div>
                        <div class="user-info">
                            <div class="name">
                                {{arr.user_nickname}}
                            </div>
                            <div class="time">
                                {{new Date((arr.time)*1000).Format("yyyy-MM-dd hh:mm:ss")}}
                            </div>
                        </div>
                    </div>
                    <div class="text">
                       {{arr.content}}
                        <a href="#reviewStatus" class="reply" @click="reply(arr)">
                            回復
                        </a>
                        <div class="dianzan">
                            <img :src="require('../../static/images/dianzan.png')" @click="dianzan(arr)">
                            <span >
                              贊({{arr.like_num}})
                            </span>
                            
                        </div>
                    </div>
                    
                    <ul class="recent-comments2" v-if="arr.parent_id">
                        <li class="triangle-up">
                            
                        </li>
                        <li class="con" >
                            <div class="user">
                                <div class="touxiang">
                                    <img :src="arr.type?anonymity:anonymity2" alt="" >
                                </div>
                                <div class="user-info">
                                    <div class="name">
                                      {{arr.parent_id.full_name}}
                                    </div>
                                    <div class="time">
                                       {{new Date((arr.parent_id.create_time)*1000).Format("yyyy-MM-dd hh:mm:ss")}}
                                    </div>
                                </div>
                            </div>
                            <div class="text">
                             {{arr.parent_id.content}}
                            </div>

                        </li>
                    </ul>
                </li>
            </ul>
            <div class="recent-commentsEmpty" v-else>
                <p>暂无評論</p>
            </div>
            <div class="more" v-if="reviews.length>=1" @click="lookMore">
                    查看更多~
            </div>
            <div class="reviewStatus" id="reviewStatus">
                <p @click="leaveWord">我要留言</p>
                <p v-show="isReply" @click="quitReply">取消回復</p>
            </div>
            <div class="box" id="box">
                <label v-show="isLogin">
                    <span>留言姓名：</span><input type="text" style=" width: 200px;height: 23px;" v-model="name">
                </label>
                <label class="textarea">
                    <span>留言内容：</span><textarea name="a" style=" width: 604px;height: 118px;" v-model="content" maxlength="250"></textarea>
                </label>
                <label>
                    <span>驗證碼：</span><input type="text" style=" width: 120px; height: 23px;" v-model="code" maxlength="4">
                  <img :src="codeImg"
                       @click="getCode" ref="getCode"/>
                </label>
                <div class="submit" @click="publish">
                    發佈
                </div>
            </div>
        </div>
   </div>
</template>

<script>
import { V1_ADD_REVIEWS,V1_GET_REVIEWS,V1_DOLIKE} from "@/config/api"
import {mapState} from "vuex"
import $ from '../../static/js/jquery.min'
import util from "../../static/js/util.js" 
export default {

	data(){
		return{
            id:this.$route.query.id,
			name:"",
			content:"",
            parent_id:0,
            isReply:false,
			reviews:[],
            newReviews:[],
			time:1498726974824,
            code:"",
            codeImg:"",
            page:0,
            isLogin:true,
            user_nickname:"",
            anonymity:require('../../static/images/touxiang.png'),
            anonymity2:require('../../static/images/touxiang2.png'),

		}
	},
    computed:{
        ...mapState({
            "userProfile":state =>state.app.userProfile
        })
    },
    activated(){
        if(this.id!=this.$route.query.id){
            this.id=this.$route.query.id;
            this.getData();
        }
    },
	methods:{
        //獲得驗證碼
        getCode(){
            this.$http.post("v1/checkcode",{
            }).then(res=>{
                this.codeImg="data:image/png;base64,"+res.data.infor;
            })
        },
        //判斷內容是否為空
        ifEmpty(){
            if(this.userProfile){
                if(this.content.length==0){
                        this.$alert('內容不能為空',{
                        confirmButtonText: '确定',
                    });
                    return false;
                };
                if(this.code.length==0){
                        this.$alert('驗證碼不能為空',{
                        confirmButtonText: '确定',
                    });
                    return false;
                }
            }else{
                if(this.name.length==0){
                        this.$alert('姓名不能為空',{
                        confirmButtonText: '确定',
                    });
                    return false;
                };
                if(this.content.length==0){
                        this.$alert('內容不能為空',{
                        confirmButtonText: '确定',
                    });
                    return false;
                };
                if(this.code.length==0){
                        this.$alert('驗證碼不能為空',{
                        confirmButtonText: '确定',
                    });
                    return false;
                }
            }
            return true;
        },
        //發佈評論
		publish(){
           if(this.userProfile){
                if(this.ifEmpty()){
                    this.$http.post(V1_ADD_REVIEWS,{
                        "token":this.userProfile.token,
                        "key_id":this.id,
                        "content":this.content,
                        "parent_id":this.parent_id,
                        "user_nickname":this.userProfile.user_nickname,
                        "checkcode":this.code,
                        "type":1,
                    }).then(res=>{
                        if(res.data.success){
                             this.$http.get(V1_GET_REVIEWS+this.id+"/"+0+"/"+10,{
                            }).then(res=>{
                                if(res.data.success){
                                   this.reviews=res.data.infor.listItems
                                    this.$alert("评论成功",{
                                        confirmButtonText: '确定',
                                    });
                                    this.content="";
                                    this.name="";
                                    this.code="";
                                    this.isReply=false;
                                    this.getCode();
                                }
                            })
                        }else{
                             this.$alert(res.data.msg,{
                                confirmButtonText: '确定',
                            });
                        }
                    })
                }
            }else{
                if(this.ifEmpty()){
                    this.$http.post(V1_ADD_REVIEWS,{
                        // "token":this.userProfile.token,
                        "key_id":this.id,
                        "content":this.content,
                        "parent_id":this.parent_id,
                        "user_nickname":this.name,
                        "checkcode":this.code,
                        "type":0,
                    }).then(res=>{
                        if(res.data.success){
                             this.$http.get(V1_GET_REVIEWS+this.id+"/"+0+"/"+10,{
                            }).then(res=>{
                                if(res.data.success){
                                   this.reviews=res.data.infor.listItems
                                    this.$alert("评论成功",{
                                        confirmButtonText: '确定',
                                    });
                                    this.content="";
                                    this.name="";
                                    this.code="";
                                    this.isReply=false;
                                    this.getCode();
                                }
                            })
                        }else{
                             this.$alert(res.data.msg,{
                                confirmButtonText: '确定',
                            });
                        }
                    })
                }
            }
	       
	    },
        //我要留言
        leaveWord(){
            this.isReply=!this.isReply;
            this.parent_id=0;
        },
        //回復
        reply(arr){
            this.isReply=true;
            this.parent_id=arr.id;
            // console.log(this.parent_id);
        },
        //取消回復
        quitReply(){
            this.isReply=!this.isReply;
            this.parent_id=0;
            // console.log(this.parent_id);
        },
        dianzan(arr){
            // console.log(arr.id);
            this.$http.post(V1_DOLIKE,{
               "id":arr.id
            }).then(res=>{
                if(res.data.success){
                    arr.like_num++;
                   // this.zanNum=res.data.infor.listItems
                }else{
                }
            })
        },
        //查看更多
        lookMore(){
            if(this.userProfile){
                this.page++;
                this.$http.get(V1_GET_REVIEWS+this.id+"/"+this.page+"/"+15,{
                }).then(res=>{
                    if(res.data.success){
                        this.newReviews=res.data.infor.listItems;
                        this.newReviews.map((item)=>{
                            // console.log(item)
                           this.reviews.push(item); 
                        })
                       // console.log("查看更多")
                       if(res.data.infor.listItems.length==0){
                            this.$alert('没有更多数据了', {
                                confirmButtonText: '确定',
                            });
                       }
                    }
                })
            }else{
                this.$alert('請先登錄', '登錄后才能查看更多內容哦', {
                    confirmButtonText: '确定',
                });
            }
        } ,
        //獲取評論列表
        getData(){
            this.$http.get(V1_GET_REVIEWS+this.id+"/"+this.page+"/"+15,{
               
            }).then(res=>{
                if(res.data.success){
                   this.reviews=res.data.infor.listItems
                   // console.log("获取评论列表")
                }else{
                    this.reviews=[]; 
                }
            })
        }
	},
	mounted(){
        
        this.getCode();
        this.getData();
        $('.recent-comments').height=200+'px';
        if(this.userProfile){
            this.isLogin=false;
            this.user_nickname=this.userProfile.user_nickname
         }else{
             this.isLogin=true;
            this.user_nickname=this.name
         }
	},
}
</script>

<style lang="scss">
@import "../style/base/_base";
.recentComments-component{
	.item6{
        margin-top: 80px;
        .recent-comments{
            margin-top: 40px;
            border-top: 3px solid $color6;
            
            >li{
                margin-top: 20px;
               border-bottom: 1px solid $color3;
                .user{
                    @include vertical-centering;
                    .touxiang{
                        // width:20px;
                        margin-right: 10px;
                        border-radius: 50%;
                        img{
                            border-radius: 50%;   
                            width:40px;
                            height:40px;
                        }
                    }
                    .name{
                        color: $color6;
                    }
                    .time{
                        color: $color3;
                    }
                }
                
                .text{
                     position: relative;
                     padding: 10px 10px 15px 24px;
                     color: $color5;
                    
                    .reply{
                        position: absolute;
                        right: 10px;
                        bottom: 10px;
                        color: $color6;
                    }
                    .dianzan{
                        position: absolute;
                        right: 67px;
                        bottom: 10px;
                        color: $color6;
                        @include vertical-centering;
                        span{
                            color: $color6;
                            
                        }
                        img{
                            width:20px;
                            height:auto;
                            margin-right: 10px;
                            cursor: pointer;
                        }
                    }
                }
            }
        }
        .moreRecent{
            height:700px;
            overflow-y: auto;
        }
        .recent-commentsEmpty{
            margin-top: 40px;
            border-top: 3px solid $color6;
            p{
                text-align: center;
                margin-top: 20px;
                margin-left: 10px;
                color:$color4;
                cursor: pointer;
            }
        }
        .recent-comments2{
            margin-left: 50px;
            background: #F4F4F4;
            border-radius: 4px;
            position: relative;
            .user{
                margin-left: 20px;
                padding-top: 10px;
            }
            li{
                border-top: 0px solid $color6;
                margin-bottom: 20px;
            }
            .triangle-up {
                position: absolute;
                top: -14px;
                left: 100px;
                width: 0;
                height: 0;
                border-left: 12px solid transparent;
                border-right: 12px solid transparent;
                border-bottom: 14px solid #F4F4F4;
            }

            
        }
        .more{
            @include allCenter;
            margin-top: 20px;
            color:$color3;
            cursor: pointer;
        }
        .reviewStatus{
            @include vertical-centering;
            margin: 20px 0 5px 0;
            p{
                margin-right: 20px;
                color:$color6;
            }
        }
        .box{
            margin-top: 0;
            >label{
                @include flex;
                color: $color5;
                font-weight: bold;
                line-height: 25px;
                span{
                    display: block;
                    width: 80px;
                }
                input{
                    border: 1px solid $color6;
                    margin-left: 10px;
                   background: #fff;
                   border-radius: 3px;
                }
                input:focus{
                    box-shadow: 0 0 2px $color6;
                }
            }
            .textarea{
               margin: 20px 0;
    
               textarea{
                 border-radius: 3px;
                border: 1px solid  $color6;
                margin-left: 10px;
                 background: #fff;
               }
               textarea:focus{
                    box-shadow: 0 0 2px $color6;
                }
            }
            .submit{
                width: 90px;
                margin-top: 30px;
                cursor: pointer;
                @include btn1($color6,$color6,#fff);
            }
        }
    }
}

</style>